<script setup lang="ts">
import type { BannerItemVO } from "@/types/homeType";
import { shallowRef } from "vue";
import type { ShallowRef } from "vue";

interface SwiperProps {
   list: BannerItemVO[];
}

defineProps<SwiperProps>();

const activeIndex: ShallowRef<number> = shallowRef<number>(0);

const changeActive: UniHelper.SwiperOnChange = (event) => {
   activeIndex.value = event.detail.current;
};

</script>

<template>
   <view class="carousel">
      <swiper :circular="true" :autoplay="true" :interval="3000" @Change="changeActive">
         <swiper-item v-for="(banner) in list" :key="banner.id">
            <navigator  hover-class="none" class="navigator">
               <image mode="aspectFill" class="image" :src="banner.imgUrl"></image>
            </navigator>
         </swiper-item>
      </swiper>
      <!-- 指示点 -->
      <view class="indicator">
         <text v-for="(item, index) in list.length" :key="item" class="dot" :class="{ active: index === activeIndex }"></text>
      </view>
   </view>
</template>

<style scoped lang="scss">
.carousel {
   height: 350rpx;
   position: relative;
   overflow: hidden;
   transform: translateY(0);
   background-color: #efefef;

   swiper-item {
      .navigator,
      .image {
         width: 100%;
         height: 100%;
      }
   }

   .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 16rpx;
      display: flex;
      justify-content: center;

      .dot {
         width: 30rpx;
         height: 6rpx;
         margin: 0 8rpx;
         border-radius: 6rpx;
         background-color: rgba(255, 255, 255, 0.4);
      }

      .active {
         background-color: #27ba9b;
      }
   }

}
</style>